<template>
  <baidu-map
    class="bm-view"
    :center="center"
    :zoom="zoom"
    @ready="handler"
    :scroll-wheel-zoom="true"
    :mapType="mapType"
    apiVersion="3.0"
  >
  </baidu-map>
</template>

<script>
import mapStyleJson from './custom_map_config.json'
export default {
  data() {
    return {
      mapType: 'BMAP_SATELLITE_MAP',
      mapStyle: {
        styleJson: [
          {
            featureType: 'all',
            elementType: 'geometry',
            stylers: {
              hue: '#007fff',
              saturation: 89,
            },
          },
          {
            featureType: 'water',
            elementType: 'all',
            stylers: {
              color: '#ffffff',
            },
          },
        ],
      },
      center: { lng: 0, lat: 0 },
      zoom: 3,
    }
  },
  mounted() {},
  methods: {
    handler({ BMap, map }) {
      console.log(BMap, map)
      // this.mapType = 'BMAP_NORMAL_MAP'
      // map.setMapStyleV2({ styleJson: mapStyleJson })
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
      map.setMapStyleV2({ styleJson: mapStyleJson })
      // map.addEventListener('tilesloaded', (e) => {
      //   console.log('type, target, size', e)

      // })
    },
  },
}
</script>
<style>
.bm-view {
  width: 100%;
  height: 800px;
}
</style>
